<template>
  <Modal
    :visible="helper.upgradingModalVisible.value"
    :title="$t('Appliance.Settings.FirmwareUpgrade.Upgrading.Text')"
    :description="helper.upgradingMessage?.value"
    :modal-style="{ marginTop: '40rpx' }"
  >
    <view class="upgrading-view">
      <view class="upgrading-image">
        <view v-if="helper.upgradingPercent" class="upgrading-percent">{{ helper.upgradingPercent.value }}%</view>
        <view v-else class="upgrading-arrow"></view>
      </view>
    </view>
  </Modal>
</template>

<script setup lang="ts">
import Modal from '@/common/modal.vue'
import type { OTAHelper } from '../helpers/types'

defineProps<{
  helper: OTAHelper
}>()
</script>

<style scoped lang="less">
@import '../firmwareUpdate.less';
.upgrading-view {
  padding: 64rpx 0 16rpx;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  .upgrading-image {
    position: relative;
    width: 240rpx;
    height: 240rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    &::before {
      content: '';
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      .svgIcon();
      .upgradeCircle();
      .upgradeCircleAnimate();
    }
  }
  .upgrading-arrow {
    width: 120rpx;
    height: 120rpx;
    .svgIcon();
    .upgradeArrow();
  }
  .upgrading-percent {
    color: var(--primary-color);
    text-align: center;
    font-size: 64rpx;
    font-weight: 500;
  }
}
</style>
